<!-- 协会信息卡片 -->
<template>
  <view class="bgf pa-15">
    <view class="disFlx">
      <TImage
        :src="info.logo"
        width="110rpx"
        height="110rpx"
        border-radius="10rpx"
        error-img-type="unit"
      />
      <view class="pl-15 py-2 fz-14 disFlx rightBox">
        <view class="disFlxJS">
          <view class="fz-16 fw-7 ov-1">
            {{ info.orgName || info.toOrgName }}
          </view>
          <view>
            <slot name="status"></slot>
          </view>
        </view>
        <view class="disFlx tagBox">
          <view v-for="(label, index) in info.industry" :key="index" class="tagTitle ov1">
            {{ label }}
          </view>
        </view>
      </view>
    </view>

    <view
      v-if="showDesc && info.details"
      class="linh-20 pt-10 fz-12 color3 detailsBox"
      :style="styles"
    >
      <view v-if="limit && showMore" class="floatBtn fz-12 fontTC" @click.stop="descVisible = true">
        更多>>
      </view>
      <view class="textBox">{{ info.details }}</view>
    </view>

    <ShowModal v-model="descVisible" title="机构简介" confirm-text="知道了" :show-cancel="false">
      <template #content>
        <view class="ma-15" style="word-break: break-all">{{ info.details }}</view>
      </template>
    </ShowModal>
  </view>
</template>

<script lang="ts" setup>
  import TImage from '@/components/TImage/index.vue';
  import { ref, getCurrentInstance, unref, onMounted } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import ShowModal from '@/components/ShowModal/index.vue';

  const props = defineProps({
    showDesc: propTypes.bool.def(false), // 是否显示简介
    limit: propTypes.number.def(0), // 展示限制行数
    info: propTypes.object.def({}),
  });
  const descVisible = ref(false);

  const styles = ref(props.limit ? `height:${40 * props.limit}rpx;` : 'height: auto;'); // 默认盒子高度,避免渲染时撑开
  const showMore = ref(false); // 是否显示更多按钮
  function getOV2height() {
    const ins: any = getCurrentInstance();
    const query = uni.createSelectorQuery().in(ins.proxy);
    query
      .select('.textBox')
      .boundingClientRect((res) => {
        const height = (res as UniApp.NodeInfo)?.height || 0;
        const textBoxheight = height ?? 0; // 文字实际高度 px
        const maxHeight = 40 * props.limit; // 限制高度 rpx
        showMore.value = textBoxheight > uni.upx2px(maxHeight);
        // 应ios中-webkit-box失效,采用max-height进行隐藏
        styles.value = `max-height: ${maxHeight}rpx;height: ${
          unref(showMore) ? maxHeight + 'rpx;' : 'auto;'
        }`;
      })
      .exec();
  }

  onMounted(() => {
    props.limit && getOV2height();
  });
</script>
<style lang="scss" scoped>
  .color3 {
    color: #808080;
  }

  .rightBox {
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
  }

  .tagBox {
    height: 40rpx;
    overflow: hidden;
    flex-wrap: wrap;

    .tagTitle {
      height: 36rpx;
      line-height: 36rpx;
      padding: 0 14rpx;
      background-color: #f5f5f5;
      border-radius: 6rpx;
      // border: solid 1px #dddddd;
      color: #808080;
      font-size: 24rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
      max-width: 40%;
    }
  }

  // 多行省略,更多环绕效果
  .detailsBox {
    overflow: hidden;
    &::before {
      content: '';
      float: right;
      // 此高度为父盒子高度减去按钮高度
      height: calc(100% - 40rpx);
    }
    .floatBtn {
      float: right;
      clear: both;
      width: 100rpx;
      height: 40rpx;
      position: relative;
      color: #2878ff;
      padding-left: 20rpx;
      &::before {
        content: '...';
        position: absolute;
        left: 0;
        color: #808080;
      }
    }
  }
</style>
